---
import Header from "@libs/layouts/header.astro"
import Footer from "@libs/layouts/footer.astro"
import BaseHead from "@libs/layouts/BaseHead.astro"
import Particles from "@libs/layouts/particles.svelte"
import Nav from "@libs/layouts/nav.astro"
import { info, header } from "@libs/config/siteconfig"

const { content } = Astro.props
---

<html lang="en">
  <head>
    <BaseHead
      title={content.title ? `${info.title} | ${content.title}` : info.title}
      description={content.description}
    />
  </head>
  <body>
    <Particles client:load />
    <main class="main">
      <!-- <Particles/> -->

      <Header src={header.src} alt={header.alt} />
      <Nav />
      <article my-5>
        <slot />
        <!-- 你的内容会被插入到这里 -->
      </article>
      <Footer />
    </main>
  </body><style is:global>
    .main {
      @apply pt-2 m-20 text-white  w-4/5 mxauto z-20;
    }
    .card {
      color: rgba(128, 140, 130, 0.6);
      /* position: absolute; */
      /* right: 100px; */
      /* bottom: 100px; */
      z-index: 10;
      font-family: sans-serif;

      /* text-align: center; */
      /* width: 300px; */
      /* height: 120px; */
      /* border-bottom: 1px solid rgba(255, 255, 255, 0.4); */
      /* border-left: 1px solid rgba(255, 255, 255, 0.4); */
      background: linear-gradient(
        to top right,
        rgba(90, 149, 207, 0.1),
        rgba(58, 76, 99, 0.1)
      );
      /* box-shadow: 1px -1px 2px 3px rgba(113, 183, 131, 0.2),
			-1px 1px 2px 3px rgba(11, 127, 199, 0.1); */
      backdrop-filter: blur(12px);
      /*  元素后面区域添加模糊效果 */
      /* border-radius: 20px; */
      /* transform: rotate(-15deg); */
    }
  </style>
</html>
